<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
</style>

<template>
  <div>
     
      <template v-if="routerPath=='trademark'" >
        <div v-loading="loading">
         
        <!-- 操作 -->
        <!--工具条-->
        <el-col :span="24" class="toolbar table_toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true" :model="filters">
           <!--  <el-form-item class="table_input">
              <el-input v-model="filters.name" placeholder="根据身份证号/姓名/账号/电话号码检索"></el-input>
            </el-form-item>
            <el-form-item class="table_i">
              <el-button type="primary" v-on:click="fetchData"><i class="el-icon-search"></i></el-button>
            </el-form-item> -->
            <el-form-item class="" >
              <el-button class="table_btn_r" type="primary"  @click="handleAdd">新增市场</el-button>
            </el-form-item>
          </el-form>
        </el-col>
    
        <!-- table start  -->
        <el-table :data="list" style="width: 100%">
          <el-table-column width="37">
            <template scope="scope">
              <img src="../assets/img/sysFile.gif">
            </template>
          </el-table-column> 
          <el-table-column label="ID"     type="index"    width="60">
          </el-table-column>
          <el-table-column prop="name" label="英文名称">
          </el-table-column>
          <el-table-column prop="title" label="市场标题" >
          </el-table-column>
          
          <el-table-column prop="nickName" label="市场图片">
            <template scope="scope">
              <img :src="scope.row.iconResUrl" width="50" height="50" />
            </template>
          </el-table-column>          
          <el-table-column prop="feeBuy" label="买入手续费">
          </el-table-column>
          <el-table-column prop="feeSell" label="卖出手续费">
          </el-table-column>
         
          <el-table-column prop="tradeTime" label="交易时间">
          </el-table-column>
          </el-table-column>
          <el-table-column prop="zhang" label="涨幅限制">
          </el-table-column>
          <el-table-column prop="die" label="跌幅限制">
          </el-table-column>
          <el-table-column prop="status" label="状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.status==1" >启用</span>
              <span v-if="scope.row.status==0" class="span_red">禁用</span>
            </template>
          </el-table-column>
          <el-table-column prop="sorting" label="排序">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
       
              <span class="span_btn" v-if="isEdit"  @click="handleEdit(scope.$index, scope.row)" >编辑</span>
              <span class="span_btn" v-if="scope.row.status==1"  @click="toggleStatus(scope.$index, scope.row)" >禁用</span>
              <span class="span_btn" v-if="scope.row.status==0"  @click="toggleStatus(scope.$index, scope.row)" >启用</span>
             
            </template>
          </el-table-column>
        </el-table>
          <!--工具条-->
        <el-col :span="24" class="toolbar toolbar_footer">
          <el-pagination v-if="total" background layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
          </el-pagination>
        </el-col>
        <!-- table end  -->

      </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>

  
  
</template>

<script>
import * as trademark from '../api/trademark';
import qs from 'qs';
import md5 from 'js-md5';

let myMixin = {
  data: function() {
    return { trademark }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {

      isDel:true,
      isEdit:true,
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      filters:{name:''},//搜索表单  
      list: [
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
          currentId:'123456'
        },
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
          currentId:'123456'
        }
      ],
      canReset: true,
      loading: false,
      userId:''//用户id
    }
  },
  methods: {

     toggleStatus:function(index,row){//禁用启用
      let markstatus="";
      if(row.status==0){
        markstatus=1;
      }else{
        markstatus=0;
      }
      //状态操作
      let para={
        marketId:row.marketId,
        status:markstatus//
      }
      console.log(para);

      trademark.modifyStatus.r(para,(res)=>{
        console.log(res)
        if(res.data.retCode==1){
          // this.$message("修改状态成功");
          this.fetchData();

        }else{
          this.$message({
            message: res.retMsg,
            type: 'error'
          });
        }
      })
    },

    //性别显示转换
    formatSex: function (row, column) {
      return row.status == 1 ? '启用' : row.status == 0 ? '禁用' : '未知';
    },
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

  

    //显示编辑界面
    handleEdit: function (index, row) {
      this.$router.push({path:"/deal/trademark/markadd",query:{id:row.marketId}});
    },
    //显示新增界面
    handleAdd: function () {
      this.$router.push({path:"/deal/trademark/markadd"});
     // this.addFormVisible = true;
    
    },
 
    fetchData(init) {
      this.loading = true;
     /* if(!this.$_has([trademark.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
          // keyword:this.filters.name
        };
       
      trademark.request.r(para).then((res) => {
        console.log(res)
        if(res.data.retCode==1){
          this.total=parseInt(res.data.data.totalRow);
          this.list = res.data.data.list;
      
        }else{
            this.$message(res.data.retMsg);

        }
        this.loading = false;
        

      });

    },
    requestNotAllowed: function(){
      trademark.notAllowed.r();
    }
  },
  watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": function(){
            this.routerPath=this.$route.path.split("/").pop();
            // this.fetchData(true)

          }
  },
  created() {
   /* this.isReleRole=this.$_has([trademark.releRolesUser]);
    this.isReleGroup=this.$_has([trademark.releGroupUser]);
    this.isEdit=this.$_has([trademark.modify]);
    this.isDel=this.$_has([trademark.remove]);
    if(this.$route.query.groupId!=undefined&&this.$route.query.groupId!="undefined"&&this.$route.query.groupId!=""){
      this.groupId=this.$route.query.groupId;
    }
*/
    this.fetchData(true)
    this.routerPath=this.$route.path.split("/").pop();
    

  }
}
</script>